import React, { useState } from 'react';
import { 
  Card, 
  Row, 
  Col, 
  Avatar, 
  Typography, 
  Tabs, 
  List, 
  Tag, 
  Button, 
  Statistic, 
  Form,
  Input,
  Upload,
  message
} from 'antd';
import { 
  UserOutlined, 
  EditOutlined, 
  FileTextOutlined,
  StarOutlined,
  LikeOutlined,
  MessageOutlined,
  UploadOutlined,
  SettingOutlined
} from '@ant-design/icons';
import { useUser } from '../../contexts/UserContext';

const { Title, Paragraph } = Typography;
const { TabPane } = Tabs;

// 模拟数据
const userArticles = [
  {
    id: '1',
    title: 'React 18新特性详解',
    createTime: '2024-03-15',
    tags: ['React', '前端'],
    likes: 128,
    comments: 32
  },
  {
    id: '2',
    title: 'TypeScript最佳实践',
    createTime: '2024-03-10',
    tags: ['TypeScript', '教程'],
    likes: 98,
    comments: 25
  }
];

const userComments = [
  {
    id: '1',
    content: '写得很好，对我帮助很大！',
    articleTitle: 'React性能优化技巧',
    createTime: '2024-03-14'
  },
  {
    id: '2',
    content: '这篇文章讲解得非常清晰',
    articleTitle: 'TypeScript类型体操详解',
    createTime: '2024-03-12'
  }
];

const Profile: React.FC = () => {
  const { user, setUser } = useUser();
  const [isEditing, setIsEditing] = useState(false);
  const [form] = Form.useForm();

  const handleEditProfile = () => {
    setIsEditing(true);
    form.setFieldsValue({
      nickname: user?.username,
      bio: user?.bio || '',
      email: user?.email
    });
  };

  const handleSaveProfile = async () => {
    try {
      const formData = await form.validateFields();
      // TODO: 调用API保存用户信息
      if (user) {
        setUser({
          ...user,
          username: formData.nickname,
          bio: formData.bio,
          email: formData.email
        });
      }
      message.success('个人信息更新成功！');
      setIsEditing(false);
    } catch (error) {
      message.error('保存失败，请重试！');
    }
  };

  return (
    <div style={{ padding: '24px 0' }}>
      <Row gutter={24}>
        {/* 左侧个人信息 */}
        <Col span={8}>
          <Card>
            <div style={{ textAlign: 'center', marginBottom: 24 }}>
              <Avatar size={120} icon={<UserOutlined />} />
              <Title level={3} style={{ marginTop: 16 }}>
                {user?.username || '未登录用户'}
              </Title>
              <Paragraph type="secondary">
                {user?.bio || '这个用户很懒，还没有填写个人简介'}
              </Paragraph>
            </div>

            {!isEditing ? (
              <Button 
                type="primary" 
                icon={<EditOutlined />} 
                block
                onClick={handleEditProfile}
              >
                编辑个人资料
              </Button>
            ) : (
              <Form form={form} layout="vertical">
                <Form.Item
                  name="avatar"
                  label="头像"
                >
                  <Upload>
                    <Button icon={<UploadOutlined />}>更换头像</Button>
                  </Upload>
                </Form.Item>
                <Form.Item
                  name="nickname"
                  label="昵称"
                  rules={[{ required: true, message: '请输入昵称' }]}
                >
                  <Input />
                </Form.Item>
                <Form.Item
                  name="bio"
                  label="个人简介"
                >
                  <Input.TextArea rows={4} />
                </Form.Item>
                <Form.Item
                  name="email"
                  label="邮箱"
                  rules={[
                    { required: true, message: '请输入邮箱' },
                    { type: 'email', message: '请输入有效的邮箱地址' }
                  ]}
                >
                  <Input />
                </Form.Item>
                <Form.Item>
                  <Button type="primary" block onClick={handleSaveProfile}>
                    保存修改
                  </Button>
                </Form.Item>
              </Form>
            )}

            <Row gutter={16} style={{ marginTop: 24 }}>
              <Col span={8}>
                <Statistic title="文章" value={userArticles.length} prefix={<FileTextOutlined />} />
              </Col>
              <Col span={8}>
                <Statistic title="获赞" value={226} prefix={<LikeOutlined />} />
              </Col>
              <Col span={8}>
                <Statistic title="评论" value={userComments.length} prefix={<MessageOutlined />} />
              </Col>
            </Row>
          </Card>
        </Col>

        {/* 右侧内容区 */}
        <Col span={16}>
          <Card>
            <Tabs defaultActiveKey="articles">
              <TabPane 
                tab={<span><FileTextOutlined />我的文章</span>}
                key="articles"
              >
                <List
                  itemLayout="horizontal"
                  dataSource={userArticles}
                  renderItem={item => (
                    <List.Item
                      actions={[
                        <span><LikeOutlined /> {item.likes}</span>,
                        <span><MessageOutlined /> {item.comments}</span>
                      ]}
                    >
                      <List.Item.Meta
                        title={item.title}
                        description={
                          <>
                            <span style={{ marginRight: 8 }}>{item.createTime}</span>
                            {item.tags.map(tag => (
                              <Tag key={tag} color="blue">{tag}</Tag>
                            ))}
                          </>
                        }
                      />
                    </List.Item>
                  )}
                />
              </TabPane>
              
              <TabPane 
                tab={<span><MessageOutlined />我的评论</span>}
                key="comments"
              >
                <List
                  itemLayout="horizontal"
                  dataSource={userComments}
                  renderItem={item => (
                    <List.Item>
                      <List.Item.Meta
                        title={item.content}
                        description={
                          <>
                            <span>评论文章：{item.articleTitle}</span>
                            <span style={{ marginLeft: 16 }}>{item.createTime}</span>
                          </>
                        }
                      />
                    </List.Item>
                  )}
                />
              </TabPane>

              <TabPane 
                tab={<span><StarOutlined />我的收藏</span>}
                key="favorites"
              >
                <List
                  itemLayout="horizontal"
                  dataSource={userArticles.slice(0, 1)}
                  renderItem={item => (
                    <List.Item
                      actions={[
                        <span><LikeOutlined /> {item.likes}</span>,
                        <span><MessageOutlined /> {item.comments}</span>
                      ]}
                    >
                      <List.Item.Meta
                        title={item.title}
                        description={
                          <>
                            <span style={{ marginRight: 8 }}>{item.createTime}</span>
                            {item.tags.map(tag => (
                              <Tag key={tag} color="blue">{tag}</Tag>
                            ))}
                          </>
                        }
                      />
                    </List.Item>
                  )}
                />
              </TabPane>

              <TabPane 
                tab={<span><SettingOutlined />账号设置</span>}
                key="settings"
              >
                <Form layout="vertical">
                  <Form.Item label="修改密码">
                    <Input.Password placeholder="请输入原密码" />
                  </Form.Item>
                  <Form.Item>
                    <Input.Password placeholder="请输入新密码" />
                  </Form.Item>
                  <Form.Item>
                    <Input.Password placeholder="请确认新密码" />
                  </Form.Item>
                  <Form.Item>
                    <Button type="primary">保存修改</Button>
                  </Form.Item>
                </Form>
              </TabPane>
            </Tabs>
          </Card>
        </Col>
      </Row>
    </div>
  );
};

export default Profile; 